<template>
  <div class="box">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <Historyhot
      :hotKeywordList="hotKeywordList"
      :historyKeywordList="historyKeywordList"
      v-if="bool == 1"
      @hisNode="hisNode"
    />
    <searchpus v-if="bool == 2" :searchhelper="searchhelper" @dian='dian' />
    <searchinfo v-if="bool == 3" 
    :value="value" 
    @getsearchdata='dataChange'
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import Historyhot from "@/components/Historyhot.vue";
import searchpus from "@/components/searchpus.vue";
import searchinfo from "@/components/searchinfo.vue";
import { GetSearchData, GetSearchHelper, GetSearchList } from "@/request/api";
export default {
  name: "H559Searchpopus",

  components: {
    Historyhot,
    searchpus,
    searchinfo,
  },

  directives: {},

  data() {
    return {
      value: "",
      hotKeywordList: "",
      historyKeywordList: "",
      defaultKeyword: "",
      bool: 1,
      searchhelper: "",
      getsearchdata: "",
      bian: "",
    };
  },

  mounted() {},

  methods: {
    hisNode(v) {
      // console.log(v);
      this.value = v;
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      this.bool = 3;
    },
    dian(k){
      // console.log(k);
      this.value=k;
      this.bool=3;
    },
    dataChange(v){
      this.getsearchdata=v;
    },
    onSearch(val) {
      // console.log(val);
      this.value=val;
      this.bool = 3;
    },
    onCancel() {
      this.$router.go(-1);
    },
    onInput(value) {
      // console.log(value);
      this.bool = 2;
      GetSearchHelper({ keyword: value }).then((res) => {
        // console.log(res);
        this.searchhelper = res.data;
      });
    },
  },
  created() {
    GetSearchData().then((res) => {
      this.hotKeywordList = res.data.hotKeywordList;
      this.historyKeywordList = res.data.historyKeywordList;
      this.defaultKeyword = res.data.defaultKeyword;
    });
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  z-index: 999;
  top: 0;

  background-color: #efefef;
}
</style>